@charset "UTF-8";
/*rem降级 */
html {
  font-size: 17px; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 11px !important; } }

@media only screen and (min-width: 375px) {
  html {
    font-size: 13px !important; } }

/*@media only screen and (min-width: 414px){
	html{font-size: 17px!important;}
}*/
body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  /*-webkit-text-size-adjust: none;	//文字不模糊*/
  /*-webkit-overflow-scrolling: touch;*/
  /*让触摸事件更加流畅*/
  /*-webkit-touch-callout: none;*/
  /*禁止用户长按出现系统菜单栏*/
  /*-webkit-user-select: none;*/
  /*禁止用户选择粘贴*/ }

::-webkit-scrollbar {
  display: none; }

a, button, input, optgroup, select, textarea {
  -webkit-tap-highlight-color: transparent;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, sans-serif; }

a {
  text-decoration: none; }

ul, li, ol {
  list-style: none; }

em, i {
  font-style: normal; }

img {
  border: 0; }

div {
  box-sizing: border-box; }

div, span, p, h1, h2 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

button, input, select, textarea {
  outline: none; }

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  display: -moz-box; }

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.clear {
  clear: both; }

.hidden {
  display: none; }

.show {
  display: block; }

body {
  background: #F5F8FA; }

.container {
  width: 100%;
  overflow: hidden;
  /*padding-bottom: calculateRem(60px);*/ }
  .container .play-box {
    width: 100%;
    height: auto;
    background: white;
    box-sizing: border-box;
    padding: 1.16667rem 1.33333rem 0.5rem;
    margin-bottom: 0.83333rem; }
    .container .play-box .play-top {
      width: 100%;
      height: auto;
      overflow: hidden; }
      .container .play-box .play-top .title {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.41667rem;
        color: #333;
        margin-bottom: 0.41667rem; }
      .container .play-box .play-top .time {
        width: 100%;
        height: 1.58333rem;
        line-height: 1.58333rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        color: #3D464C; }
        .container .play-box .play-top .time .status-btn {
          display: inline-block;
          height: 1.58333rem;
          line-height: 1.58333rem;
          box-sizing: border-box;
          border: 1px transparent solid;
          border-radius: 2px;
          margin-left: 3px;
          padding: 0 4px; }
        .container .play-box .play-top .time .playing {
          color: #d94446;
          border: 1px solid #d94446; }
        .container .play-box .play-top .time .preview {
          color: #3498dc;
          border: 1px solid #3498dc; }
        .container .play-box .play-top .time .backview {
          color: #f5ab30;
          border: 1px solid #f5ab30; }
        .container .play-box .play-top .time .endview {
          color: #9fa3a6;
          border: 1px solid #9fa3a6; }
    .container .play-box .video-box {
      display: block;
      width: 100%;
      height: 16.08333rem;
      box-sizing: border-box;
      margin-top: 0.83333rem;
      position: relative; }
      .container .play-box .video-box .video-bg {
        width: 100%;
        height: 100%; }
        .container .play-box .video-box .video-bg > img {
          width: 100%;
          height: 100%; }
      .container .play-box .video-box .play-icon {
        position: absolute;
        width: 3.5rem;
        height: 3.5rem;
        left: 50%;
        top: 50%;
        margin-left: -1.75rem;
        margin-top: -1.75rem; }
        .container .play-box .video-box .play-icon > img {
          width: 100%;
          height: 100%; }
    .container .play-box .contributing {
      position: relative; }
      .container .play-box .contributing:after {
        content: '';
        display: block;
        position: absolute;
        width: 3.83333rem;
        height: 3.75rem;
        background: url("../images/Group5@2x.png") no-repeat;
        background-size: 100%;
        top: -2px;
        right: -2px;
        z-index: 1000; }
    .container .play-box .play-bottom {
      width: 100%;
      height: auto;
      margin-top: 0.83333rem; }
      .container .play-box .play-bottom .p-man {
        display: inline-block;
        vertical-align: top;
        height: 2rem;
        line-height: 2rem;
        max-width: 6.66667rem;
        width: auto;
        margin-right: 1.08333rem;
        margin-bottom: 0.83333rem; }
        .container .play-box .play-bottom .p-man .pic {
          height: 2rem;
          width: 2rem;
          border-radius: 50%;
          overflow: hidden;
          float: left; }
          .container .play-box .play-bottom .p-man .pic > img {
            width: 100%;
            height: 100%; }
        .container .play-box .play-bottom .p-man .name {
          float: left;
          height: 2rem;
          width: 4.16667rem;
          margin-left: 0.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }

.dropload-up, .dropload-down {
  position: relative;
  height: 0;
  overflow: hidden;
  font-size: 12px;
  /* 开启硬件加速 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0); }

.dropload-down {
  height: 50px; }

.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData {
  height: 50px;
  line-height: 50px;
  text-align: center; }

.dropload-load .loading {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 100%;
  margin: 6px;
  border: 2px solid #666;
  border-bottom-color: transparent;
  vertical-align: middle;
  -webkit-animation: rotate 0.75s linear infinite;
  animation: rotate 0.75s linear infinite; }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.opacity {
  -webkit-animation: opacity 0.3s linear;
  animation: opacity 0.3s linear; }

@-webkit-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
